<template>
	<div>
		<UPLOAD v-if="upload">
		
		</UPLOAD>
	
	<div style="height:500px;padding:5px;" v-if="show">
		<el-container>
			<el-container>
				<el-main style="height:500px;">
					<el-container>
						<div class="main1" style="width:100%;padding:5px;margin-bottom: 100px;background-color: #FFFFFF;">
							<div style="width:80%;height:100%;">
								<el-row>
									<el-col :span="7">
										<div style="width:85%;height:350px;margin: 20px 2px;padding: 20px;text-align: center;">
											<el-row>
											<el-image :src="img" style="width: 180px; height: 210px" :preview-src-list="srcList"></el-image>
											</el-row>
											<el-row>
											姓名：{{this.student.name}}
											</el-row>
										</div>
									</el-col>
									<el-col :span="8">
										<div style="width:85%;height:350px;margin: 20px 2px;padding: 20px;">									
											<el-row style="padding: 10px;">年级：{{this.student.grade}}</el-row>
											<el-row style="padding: 10px;">性别：{{this.student.sex}}</el-row>
											<el-row style="padding: 10px;">邮箱：{{this.student.email}}</el-row>
											<el-row style="padding: 10px;">籍贯：{{this.student.nativePlace}}</el-row>
											<el-row style="padding: 10px;">专业：{{this.student.profession}}</el-row>
											<el-row style="padding: 10px;">身份证：{{this.student.IDcard}}</el-row>
										</div>
									</el-col>
									<el-col :span="7">
										<div style="width:86%;height:350px;margin: 20px 2px;padding: 20px;">
									
											<el-row style="padding: 10px;">手机号：{{this.student.cellPhone}}</el-row>
										</div>
									</el-col>
									<el-col :span="2">
										<div style="width:86%;height:350px;margin: 20px 2px;padding: 20px;">

											<el-row style="padding: 10px;">
												<router-link :to="{name:'userXG'}" :underline="false"><el-button type="primary" icon="el-icon-edit" circle>修改</el-button></router-link>
											</el-row>
											<!--<el-row style="padding: 10px;">
												<el-button :plain="true" @click="open">确定</el-button>
											</el-row>-->

										</div>
									</el-col>
								</el-row>
							</div>
						</div>
					</el-container>
					 <el-container>
				<el-main>
					<router-view name="userV" />
				</el-main>
			</el-container>
				</el-main>
			</el-container>
		
		</el-container>

	</div>
	</div>
</template>

<script>
import UPLOAD from "./upload.vue";
import userDataMixin from '../../mixin/userDataMixin'
	export default {
		name: 'User',
		mixins:[userDataMixin],
		components: {
			UPLOAD
		},
		data() {
			return {
				name:'xxx',
				username:'xxx',
				sex:'男',
				branch:'19级大数据1班',
				role:'学生',
				studentNumber:'1234567890',
				IDcard:'1234567890',
				cellPhone:'1234567890',
				img: "http://120.79.136.233:9898/queryStudentUserHeadPortraitById/" + localStorage.getItem("userId"),
				srcList: [
					"http://120.79.136.233:9898/queryStudentUserHeadPortraitById/" + localStorage.getItem("userId")
				],
				upload: true,
				show: false
			}
		},
		watch: {
			student: {
				deep: true,
				handler(nV, oV) {
					this.upload = false;
					this.show = true;
				},
			}
		}
	}
</script>

<style scoped>
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}
	
	.el-main {
		background-color: lightgoldenrodyellow;
	}
	
	.el-row {
		padding-left: 0.625rem;
		padding-right: 0.625rem;
	}
	
	.el-col {
		border-radius: 4px;
	}
	
	.bg-purple-dark {
		background: #0068D7;
	}
	
	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}
	
	.mains {
		background-color: #0068DB;
	}
	
	.school {
		margin-top: 15px;
		margin-left: 8px;
		font-size: 25px;
	}
	
	.headline {
		margin-top: 20px;
		font-size: 25px;
		color: #FFFFFF;
		text-align: center
	}
</style>